<template>
  <el-main style="height: 930px;">
    <div>

      <el-dialog :visible.sync="dialogFzVisible" title="选择分站" @close="closeDialog">
        <el-table :data="substations" style="width: 100%">
          <el-table-column prop="substationId" label="ID" width="180px"></el-table-column>
          <el-table-column prop="substationName" label="分站名" width="180px"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="selectSubstation(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>


      <el-dialog :visible.sync="dialogVisible" title="选择配送员" @close="closeDialog">
        <el-table :data="deliveryPersons" style="width: 100%">
          <el-table-column prop="deliveryPersonId" label="ID" width="100px"></el-table-column>
          <el-table-column prop="name" label="姓名" width="180px"></el-table-column>
          <el-table-column prop="contactInfo" label="联系信息" width="180px"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="selectDeliveryPerson(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>任务单管理</el-breadcrumb-item>
      </el-breadcrumb>


      <el-select v-model="value" placeholder="请选择想要查询的信息"
                 style="position: relative;left: 420px;">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

      <el-input
        :placeholder="'请选择想要查找的信息'"
        v-model="target"
        @change="clear"
        clearable
        style="width: auto;left: 450px;position: relative;"
        @keyup.enter.native="getDetail">
      </el-input>

      <el-button
        type="primary"
        icon="el-icon-search"
        class="btn1"
        style="position: relative;left: 480px;"
        @click="getDetail">
        搜索</el-button>

    </div>


    <div>
      <el-table
        :data="tableData"
        :cell-style="{textAlign:'center'}"
        :header-cell-style="{textAlign:'center'}"
        style="width: 3000px;"
        empty-text="无"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading">
        <el-table-column
          prop="orderID"
          label="订单号"
          width="200px"
          sortable="true"
          text-align: center>
        </el-table-column>
        <el-table-column
          prop="taskID"
          label="任务单号"
          width="200px"
          sortable="true"
          text-align: center>
          <template slot-scope="scope">
            <el-link :underline="false" @click="">{{scope.row.taskID}}</el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="receiverName"
          label="客户姓名"
          sortable="true"
          width="114px">
        </el-table-column>
        <!-- <el-table-column
          prop="receiverPhone"
          label="收货人电话"
          sortable="true"
          width="114px">
        </el-table-column> -->
        <el-table-column
          prop="receiverAddress"
          label="投递地址"
          sortable="true"
          width="250px">
        </el-table-column>
        <el-table-column
          prop="serviceTime"
          label="要求完成日期"
          sortable="true"
          width="150px">
        </el-table-column>
        <el-table-column
          prop="taskType"
          label="任务类型"
          sortable="true"
          width="100px">
        </el-table-column>
<!--        <el-table-column-->
<!--          prop="taskStatus"-->
<!--          label="任务状态"-->
<!--          sortable="true"-->
<!--          width="120px">-->
<!--          <template slot-scope="scope" >-->
<!--            <el-tag-->
<!--              :type="scope.row.taskStatus=='已领货'?'primary':scope.row.taskStatus=='完成'?'info':scope.row.taskStatus=='失败'?'danger':scope.row.taskStatus=='已调度'?'priamry':scope.row.taskStatus=='可分配'?'success':'primary'">-->
<!--              {{scope.row.taskStatus}}-->
<!--            </el-tag>-->
<!--          </template>-->
<!--        </el-table-column>-->

        <el-table-column label="操作" sortable="true" width="160px">
          <template slot-scope="scope">
            <template v-if="scope.row.postmanID">
              <span>配送员：{{scope.row.postmanID}}</span>
            </template>
            <template v-else>
              <el-button size="mini" type="success" @click="showDialog(scope.row)">分配</el-button>
            </template>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[5, 8, 10]"
        :total=allData.length
        :page-size="pageSize"
        :current-page="currentPage"
      >
      </el-pagination>
    </div>
  </el-main>

  </el-container>


  </el-container>

</template>

<script>
import axios from 'axios'
export default{
  name: 'Task',
  data(){
    return {
      substationId:'',
      substations:[],
      filteredSubstations:[],
      searchKeyword:'',
      dialogVisible:false,
      dialogFzVisible:false,
      taskChosenId:0,
      target:'',
      deliveryPersons: [],
      allData:[],
      tableData:[],
      currentPage:1,
      pageSize:5,
      loading:false,
      options:[{
        value: 0,
        label: '-'
      }, {
        value: 1,
        label: '订单号'
      }, {
        value: 2,
        label: '任务单号'
      }, {
        value: 3,
        label: '投递地址'
      }, {
        value: 4,
        label: '任务类型'
      }],
      value:0,
      value1:[]
    }
  },
  methods:{
    showDialog(row) {
      this.taskChosenId=row.taskID;

      axios.get('http://localhost:8088/delivery-person/all/'+this.substationId).then(response => {
        this.deliveryPersons = response.data.data;
        this.dialogVisible = true;
      }).catch(error => {
        console.error(error);
      });

      // 示例数据，替换成实际的接口返回数据
      // this.deliveryPersons = [
      //   { id: 1, name: 'John Doe', contact_info: 'john@example.com' },
      //   { id: 2, name: 'Jane Smith', contact_info: 'jane@example.com' },
      //   { id: 3, name: 'Bob Johnson', contact_info: 'bob@example.com' }
      // ];

      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    selectDeliveryPerson(selectedPerson) {
      // 处理用户选择的配送员
      // console.log('Selected Delivery Person:', selectedPerson);
      // 可以在这里进行后续的处理，比如将选中的配送员信息保存到数据模型中
      // this.selectedPerson = selectedPerson;

      axios.post('http://localhost:8087/test/task/savetask/'+this.taskChosenId+"/person/"+selectedPerson.deliveryPersonId+"/fenzhanId/"+this.substationId).then(response => {
        this.dialogVisible = false;
      }).catch(error => {
        console.error(error);
      });


      this.dialogVisible = false;
    },

    getByDate(){
      this.loading=true;
      // let ttt = {};
      // ttt["startDate"]=this.value1[0];
      // ttt["endDate"]=this.value1[1];
      //   const data = {
      //     dateBody:{
      //       startDate:this.value1[0],
      //       endDate:this.value1[1]

      //     }
      //   }
      let data = new FormData();
      data.append("startDate",this.value1[0]);
      data.append("endDate",this.value1[1]);
      axios.post('http://localhost:8087/test/task/date',data).then(resData=>{
        this.allData = resData.data.data;
        this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
        this.loading=false;
      }).catch(err =>{
        this.loading=false;
      });
    },
    selectSubstation(substation) {
      this.substationId=substation.substationId;
      this.dialogFzVisible = false;
      this.getAll();
    },
    getAll(){
      this.loading=true;

      axios.get('http://localhost:8088/task/all/'+this.substationId).then(resData=>{
        // console.log(resData);
        this.allData = resData.data.data;
        this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
        this.loading=false;
      }).catch(err =>{
        this.loading=false;
      });
    },

    // getByPage(){
    //    this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
    //    console.log("asdsad"+this.tableData);
    //  },
    getDetail(){
      this.loading=true;
      switch(this.value){
        case 0:
          alert("请先选择想要查询的信息！");
          this.getAll()
          break;
        case 1:

          axios.get('http://localhost:8088/task/all/'+this.substationId).then(resData=>{
            this.allData = resData.data.data;
            this.allData = this.allData.filter(row => {
              return row.orderID.includes(this.target);
            });
            this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
            this.loading=false;
          }).catch(err =>{
            this.loading=false;
          });

          break;
        case 2:
          axios.get('http://localhost:8088/task/all/'+this.substationId).then(resData=>{
            this.allData = resData.data.data;
            this.allData = this.allData.filter(row => {
              return row.taskID.includes(this.target);
            });
            this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
            this.loading=false;
          }).catch(err =>{
            this.loading=false;
          });

          break;
        case 3:
          axios.get('http://localhost:8088/task/all/'+this.substationId).then(resData=>{
            this.allData = resData.data.data;
            this.allData = this.allData.filter(row => {
              return row.receiverAddress.includes(this.target);
            });
            this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
            this.loading=false;
          }).catch(err =>{
            this.loading=false;
          });

          break;
        case 4:
          axios.get('http://localhost:8088/task/all/'+this.substationId).then(resData=>{
            this.allData = resData.data.data;
            this.allData = this.allData.filter(row => {
              return row.taskType.includes(this.target);
            });
            this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
            this.loading=false;
          }).catch(err =>{
            this.loading=false;
          });

          break;
      }
    },

    //上色功能，目前不知道为什么用不了，先放一放
    // Dye({row,rowIndex}){
    //   if(rowIndex == 1){
    //     return 'success-row';
    //     // alert(row.taskStatus);
    //   } else if(row.taskStatus == "缺货"){
    //     return 'quehuo';
    //     // alert(row.taskStatus);
    //   }
    //   return '';
    //   // alert(row.taskStatus);
    // },

    haha(row,index){
      console.log(index);
    },
    clear(){
      if(this.value1==null || this.target=='') {
        this.getAll();
      }
    },
    test(){
      alert("我被电了");
    },

    //分页用
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getAll();
      console.log(this.tableData);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getAll();
      console.log(this.tableData);
      // console.log(this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize));
    },
    showFzDialog() {

      axios.get('http://localhost:8088/substation/all').then(response => {
        this.substations = response.data.data;
        this.dialogFzVisible = true;
      }).catch(error => {
        console.error(error);
      });
      this.dialogFzVisible = true;
    },

  },
  mounted() {
    this.showFzDialog();
  }

}

</script>

<style>

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #00aaff;
}

.el-table .quehuo {
  background: #FF0000;
}

.btn1 {
  position: relative;
  right: 0.625rem;
}

</style>
